<template>
    <template v-for="im in modelData">
        <h2>{{ im.name }}</h2>
        <div class="flex-cc card_g">
            <template v-for="im1 in im.cards">
                <el-card shadow="hover" class="card">
                    <img :src="im1.img" />
                    <div class="flex-cc btn_g">
                        <el-button v-for="i in btns" link @click="i.fn(im1.id)">
                            <el-icon size="20px">
                                <component :is="i.icon" />
                            </el-icon>
                            <div>{{ i.title }}</div>
                        </el-button>
                    </div>
                    <template #footer>
                        {{ im1.title }}
                    </template>
                </el-card>
            </template>
        </div>
    </template>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { useStore } from '@/stores'
import router from '@/router';


const store = useStore()
const img = 'https://knowledge.bctools.cn/jvs-public/img/%E9%A3%8E%E6%99%AF/a4.png'
const modelData = reactive([])

const btns = [
    {
        icon: 'Edit',
        title: '编辑',
        fn(e) {
            console.log(e);
            router.push({
                name: 'edit',
                query: { id: e }
            })
        }
    },
    {
        icon: 'Delete',
        title: '删除',
        fn(e) {
            console.log(e);
        }
    },
    {
        icon: 'More',
        title: '暂无',
        // icon: 'Download',
        // title: '下载',
        fn(e) {
            console.log(e);
        }
    },
    {
        icon: 'Collection',
        title: '置顶',
        fn(e) {
            console.log(e);
        }
    },
]


const getAsideMenu = e => {
    modelData[0] = {
        name: '全部工程',
        cards: e.map(i => ({ id: i.id, title: i.name, img: img }))
    }
}
onMounted(() => {
    if (store.asideMenu) {
        getAsideMenu(store.asideMenu)
    }
})
watch(() => store.asideMenu, e => getAsideMenu(e))
</script>

<style scoped>
.card_g {
    flex-wrap: wrap;
    justify-content: start;
}

.card {
    max-width: 180px;
    margin: 20px 10px;
    position: relative;
    cursor: pointer;

    .btn_g {
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        background: #1e6fff;
        flex-wrap: wrap;
        padding: 20px 20px 80px;
        display: none;

        .el-button {
            color: #fff;
            margin: 0;
            width: 50%;

            &:hover>>>span {
                background-color: #ffffff30;
            }

            &>>>span {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                padding: 10px;
                border-radius: 3px;
                font-family: '黑体';
                font-size: 12px;
                width: 68px;
                height: 68px;
            }
        }
    }

    &>>>.el-card__body {
        padding: 0;
        width: 180px;
        height: 180px;
    }

    &>>>.el-card__footer {
        position: relative;
        height: 50px;
        padding: 10px;
    }

    img {
        width: 100%;
    }

    &:hover {
        transform: translateY(-3px);
        border: 1px solid var(--pyColor);

        .btn_g {
            display: block;
        }

        &>>>.el-card__footer {
            color: #FFF;
        }
    }
}
</style>